<template>
	<link rel="stylesheet" type="text/css" media="print" href="/css/print-lock.css">
	<el-container >
		<el-header>
			<div class="right-panel">
				<el-input placeholder="宽度(毫米)" v-model="panel.width" style="width: 120px" />

				<el-input placeholder="高度(毫米)" v-model="panel.height" style="width: 120px" />
				<el-button type="primary" icon="el-icon-crop" @click="addPanel">生产设计面板</el-button>
				<el-button type="primary" icon="el-icon-checked" @click="savePanel">保存</el-button>
				<el-button type="primary" icon="el-icon-printer" @click="printerPanel">预览</el-button>
			</div>
		</el-header>
		<el-main>
			<el-container style="position: relative;">
				<el-aside></el-aside>
				<el-main class="nopadding">
					<div class="ep-draggable-item item" tid="defaultModule.text">
					</div>
					<div id="templateDesignDiv" class="templateDesignDiv"></div>
				</el-main>
				<el-aside>
					<div id="PrintElementOptionSetting" class="PrintElementOptionSetting"></div>
				</el-aside>
			</el-container>
		</el-main>
	</el-container>
</template>

<script>
	import $ from 'jquery'
	import { hiprint } from "vue-plugin-hiprint";
	import TestProvider from '@/utils/testProvider';
	
	export default {
		name: 'listCrud',

		data() {
			return {
				hiprintTemplate: {},
				saveJson: '{ "panels": [ { "name": null, "height": "80", "width": "80", "paperHeader": 0, "paperFooter": 226.7716535433071, "printElements": [ { "options": { "left": 9, "top": 36, "height": 9.75, "width": 120, "field": "procedure_name", "title": "流程名" }, "printElementType": { "title": "流程名", "type": "text" } } ], "paperNumberDisabled": true, "paperNumberContinue": true, "watermarkOptions": {} } ] }',
				panel: {
					width: '',
					height: '',
				},
				fields: [{
					tid: 'defaultModule.company_name',
					type: "text",
					title: "客户",
					field: 'company_name',
				},{
					tid: 'defaultModule.company_sign_name',
					type: "text",
					title: "品牌",
					field: 'company_sign_name',
				},{
					tid: 'defaultModule.size',
					type: "text",
					title: "尺码",
					field: 'size',
				},{
					tid: 'defaultModule.color',
					type: "text",
					title: "颜色",
					field: 'color',
				},{
					tid: 'defaultModule.goods_number',
					type: "text",
					title: "货号",
					field: 'goods_number',
				},{
					tid: 'defaultModule.goods_desc',
					type: "text",
					title: "货品名",
					field: 'goods_desc',
				},{
					tid: 'defaultModule.number',
					type: "text",
					title: "数量",
					field: 'number',
				},{
					tid: 'defaultModule.barcode',
					type: "barcode",
					title: "库存码",
					field: 'barcode',
				}]
			}
		},
		mounted() {

			// let hiprintTemplate = new hiprint.PrintTemplate()
			hiprint.init({
			    //providers: [defaultElementTypeProvider()],
			    providers: [new TestProvider(this.fields)],
			});
			
			this.lastPanel()
    		
		},
		methods: {
			refreshPanel() {
				window.location.reload();
			},
			addPanel() {
				
				this.hiprintTemplate = new hiprint.PrintTemplate({
				    settingContainer: "#PrintElementOptionSetting", 
				});
				$('#templateDesignDiv').empty()
				// var items = $('.ep-draggable-item')
				hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
				
	    		hiprint.PrintElementTypeManager.build('#templateDesignDiv', 'defaultModule');
				this.hiprintTemplate.addPrintPanel({ width: this.panel.width, height: this.panel.height, paperFooter: 0, paperHeader: 0 , paperNumberDisabled: true});
				this.hiprintTemplate.design('#templateDesignDiv', {grid: true, axisEnabled: true});
			},
			printerPanel() {
				this.hiprintTemplate.print([{
					company_name: '陈文越',
					company_sign_name: '',
					color: '天蓝',
					size: '110',
					goods_number: 'ET5800',
					goods_desc: '儿童羊绒套装',
					number: '30',
					barcode: 'ET5800=123=30'
				}]);
			},
			async savePanel() {
				this.saveJson = this.hiprintTemplate.getJson()

				var reqData = {
					type: 'stock',
					data: {
						name: '库存打印模板',
						json_data: JSON.stringify(this.saveJson),

					}
				}

				var res = await this.$API.printTmp.edit.post(reqData)

				if (res.code == 200) {
					this.$alert(res.message, "提示", {type: 'success'})
				} else {
					this.$alert(res.message, "提示", {type: 'error'})
				}
			},
			async lastPanel() {

				var res = await this.$API.printTmp.get.get({type: 'stock'});
				this.saveJson = res.data.json_data
				if (this.saveJson == '') {
					return 
				}
				this.hiprintTemplate = new hiprint.PrintTemplate({
				    settingContainer: "#PrintElementOptionSetting", 
				    template: JSON.parse(this.saveJson)
				});
				$('#templateDesignDiv').empty()
				// var items = $('.ep-draggable-item')
				hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
				
	    		hiprint.PrintElementTypeManager.build('#templateDesignDiv', 'defaultModule');
				this.hiprintTemplate.design('#templateDesignDiv', {grid: true, axisEnabled: true});
			}
		}
	}
</script>

<style>
	.hiprint-printElement-type {width: 300px; position: absolute;left: 0; height: 200px;}
	.ep-draggable-item {
		padding: 0 0 0 20px;
		font-size: 20px;
	}
</style>
